<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option" @change="change(value)"/>
        </van-dropdown-menu>
        <router-view :key="$route.path + $route.query.t"></router-view>
        <!--因为跳转和本路由相同路由时不会更新路由（销毁、重建的过程），只是传参，那么我们设置的生命周期函数就只执行一次
            因此我们需要通过给相应的router-view提供不同key属性的方法强制更新路由
        -->
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Tabs",
    data() {
        return {
            value: 0,
            option: [
                {text: '全部', value: 0},
                {text: '分组1', value: 1},
                {text: '分组2', value: 2},
            ],
        }
    },
    methods: {
        change(value) {
            // console.log(value)
            this.$router.push({
                path: '/staff/staffData',
                query: {
                    value,
                    t: Date.now()
                }
            })
        }

    },
    mounted() {
        this.change(0);
    },

}
</script>

<style scoped>
div:has(div.van-dropdown-menu__bar){
    position: sticky;
    top: 0px;
    z-index: 100;
}
</style>
